<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="30%"
    @open="open"
  >
    <div class="upload">
      <!-- <el-alert
        :closable="false"
        :title="`支持xls、xlsx、csv格式，单次可最多选择${limit}个文件，每个文件不可大于${size}M，如果大于${size}M会自动为您过滤`"
        type="info"
      /> -->
      <!-- <el-alert :closable="false" :title="`仅支持sqlite格式,文件不可大于${size}M，如果大于${size}M会自动为您过滤`" type="info" /> -->
      <br />
      <el-upload
        ref="upload"
        accept=".db"
        :action="action"
        :auto-upload="false"
        class="upload-demo"
        :close-on-click-modal="false"
        :data="{
          costNumber,
          equipmentCode,
          title,
          time,
        }"
        drag
        :file-list="fileList"
        :headers="headers"
        :limit="limit"
        :multiple="true"
        :name="name"
        :on-change="handleChange"
        :on-error="handleError"
        :on-exceed="handleExceed"
        :on-preview="handlePreview"
        :on-progress="handleProgress"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将sqlite文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <div v-if="show" style="text-align: left; margin: 10px 0px">
        正在上传中... 当前上传成功数:{{ imgSuccessNum }}个 当前上传失败数:{{ imgErrorNum }}个
      </div> -->
      <el-button type="primary" @click="handleClose">关闭</el-button>
      <el-button v-loading.fullscreen.lock="fullscreenLoading" size="small" style="margin-left: 10px" type="success" @click="submitUpload">
        开始上传
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'VabUploadExcle',
    props: {
      title: {
        type: String,
        default: '产量数据',
        required: true,
      },
      url: {
        type: String,
        default: '/upload',
        required: true,
      },
      action: {
        type: String,
        default: '/',
        required: true,
      },
      name: {
        type: String,
        default: 'file',
        required: true,
      },
      costNumber: {
        type: String,
        default: '',
        required: true,
      },
      equipmentCode: {
        type: String,
        default: '',
        required: true,
      },
      limit: {
        type: Number,
        default: 5,
        required: true,
      },
      type: {
        type: Number,
        default: 1,
        required: true,
      },
      size: {
        type: Number,
        default: 10,
        required: true,
      },
    },
    data() {
      return {
        fullscreenLoading: false,
        time: moment().format('YYYYMMDDHHmmss'),
        show: false,
        loading: false,
        dialogVisible: false,
        dialogImageUrl: '',
        headers: {},
        fileList: [],
        imgNum: 0,
        imgSuccessNum: 0,
        imgErrorNum: 0,
        typeList: null,
        dialogFormVisible: false,
      }
    },
    computed: {},
    methods: {
      submitUpload() {
        this.$refs.upload.submit()
        this.fullscreenLoading = true
      },
      handleProgress() {
        this.loading = true
        this.show = true
      },
      handleChange(file, fileList) {
        // if (file.size > 1048576 * this.size) {
        //   fileList.map((item, index) => {
        //     if (item === file) {
        //       fileList.splice(index, 1)
        //     }
        //   })
        //   this.fileList = fileList
        // } else {
        //   this.allImgNum = fileList.length
        // }
        this.allImgNum = fileList.length
      },
      handleSuccess(response, file, fileList) {
        // if (response.code == 200) {
        //   this.imgNum = this.imgNum + 1
        //   this.imgSuccessNum = this.imgSuccessNum + 1
        //   if (fileList.length === this.imgNum) {
        //     setTimeout(() => {
        //       this.fullscreenLoading = false
        //       this.$baseMessage(`上传完成! 共上传${fileList.length}个文件`, 'success')
        //     }, 1000)
        //   }
        //   setTimeout(() => {
        //     this.show = false
        //     this.dialogFormVisible = false
        //     this.$emit('refreshTable')
        //   }, 1000)
        // }
        this.imgNum = this.imgNum + 1
        this.imgSuccessNum = this.imgSuccessNum + 1
        if (fileList.length === this.imgNum) {
          setTimeout(() => {
            this.fullscreenLoading = false
            this.$baseMessage(`上传完成! 共上传${fileList.length}个文件`, 'success')
          }, 1000)
        }
        setTimeout(() => {
          this.show = false
          this.dialogFormVisible = false
          this.$emit('refreshTable')
        }, 1000)
      },
      handleError() {
        this.imgNum = this.imgNum + 1
        this.imgErrorNum = this.imgErrorNum + 1
        this.$baseMessage(`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(file.raw.size / 1024, 0)}KB`, 'error')
        setTimeout(() => {
          this.loading = false
          this.show = false
        }, 1000)
      },
      handleRemove() {
        this.imgNum = this.imgNum - 1
        this.allNum = this.allNum - 1
      },
      handlePreview(file) {
        // this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleExceed(files, fileList) {
        this.$baseMessage(
          `当前限制选择 ${this.limit} 个文件，本次选择了
             ${fileList.length}
             个文件`,
          'error'
        )
      },
      handleShow(data) {
        this.data = data
        this.dialogFormVisible = true
      },
      open() {
        this.fileList = []
        this.allImgNum = 0
        this.imgNum = 0
        this.imgSuccessNum = 0
        this.imgErrorNum = 0
      },
      handleClose() {
        this.fileList = []
        this.allImgNum = 0
        this.imgNum = 0
        this.imgSuccessNum = 0
        this.imgErrorNum = 0
        /* if ("development" === process.env.NODE_ENV) {
      this.api = process.env.VUE_APP_BASE_API;
    } else {
      this.api = `${window.location.protocol}//${window.location.host}`;
    }

    this.action = this.api + this.url; */
        this.dialogFormVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .upload {
    height: auto;
    .upload-demo {
    }
  }
</style>
<style>
  body {
    overflow-y: scroll;
    overflow: auto !important;
  }
</style>
